<template>
    <div class="panel-body panel-home">
        <div class="panel-header">
            <div class="panel-title">
                数据统计
            </div>
        </div>
        <div class="panel-main home-count">
            <div class="count-item good-count">
                <div class="card-header">商品总量</div>
                <div class="card-number count1">{{ nums.order_num }}</div>
                <div class="card-description">当前商品总数量</div>
                <i class="fa fa-gift"></i>
            </div>
            <div class="count-item order-count">
                <div class="card-header">订单总量</div>
                <div class="card-number count2">{{ nums.new_order_num }}</div>
                <div class="card-description">已付款订单总数量</div>
                <i class="fa fa-cart-plus"></i>
            </div>
            <div class="count-item user-count">
                <div class="card-header">用户总量</div>
                <div class="card-number count3">{{ nums.user_num }}</div>
                <div class="card-description">当前用户总数量</div>
                <i class="fa fa-user"></i>
            </div>
            <div class="count-item recharge-count">
                <div class="card-header">充值金额</div>
                <div class="card-number count4">122345.00</div>
                <div class="card-description">当前用户总充值金额</div>
                <i class="fa fa-cny"></i>
            </div>
        </div>
        <div class="panel-header">
            <div class="panel-title">
                实时概况
            </div>
        </div>
        <div class="panel-main home-realtime">
            <div class="realtime-item user-realtime">
                <div class="card-icon"><div><i class="fa fa-cny"></i></div></div>
                <div class="card-body">
                    <div class="card-header">交易金额(元)</div>
                    <div class="card-number">122345.00</div>
                    <div class="card-description">昨日：1223.34</div>
                </div>
            </div>
            <div class="realtime-item order-realtime">
                <div class="card-icon"><div><i class="fa fa-cart-plus"></i></div></div>
                <div class="card-body">
                    <div class="card-header">支付订单数</div>
                    <div class="card-number">2344</div>
                    <div class="card-description">昨日：76</div>
                </div>
            </div>
            <div class="realtime-item new-realtime">
                <div class="card-icon"><div><i class="fa fa-user"></i></div></div>
                <div class="card-body">
                    <div class="card-header">新增用户数</div>
                    <div class="card-number">5222</div>
                    <div class="card-description">昨日：238</div>
                </div>
            </div>
            <div class="realtime-item good-realtime">
                <div class="card-icon"><div><i class="fa fa-cart-arrow-down"></i></div></div>
                <div class="card-body">
                    <div class="card-header">下单用户数</div>
                    <div class="card-number">522</div>
                    <div class="card-description">昨日：74</div>
                </div>
            </div>
        </div>
    </div>
</template>
<!---->
<script>
    export default {
        data() {
            return {
                nums:{
                    order_num: 0,
                    new_order_num: 0,
                    user_num: 0,
                }
            }
        },
        created() {
            this.countUp('order_num',1539);
            this.countUp('new_order_num',525);
            this.countUp('user_num',4042);
        },
        methods: {
            countUp(key,count) {
                let divBy = 100,
                    speed = Math.round(count / divBy),
                    runCount = 1;
                let that = this;
                let int = setInterval(() => {
                    if(runCount < divBy){
                        that.nums[key] = speed * runCount;
                        runCount++;
                    } else if(parseInt(that.nums[key]) < count) {
                        that.nums[key] = parseInt(that.nums[key]) + 1;
                    } else {
                        clearInterval(int);
                    }
                }, 24);
            },


        }
    }
</script>
